<template>
  <div class="dialog-order-detail">
    <el-dialog
     title="订单信息"
     :visible="dialogVisibleOrder"
     @update:visible="close"
     width="53%">
      <div class="main">
        <div class="head">
          <div class="number-status">
            <span class="number">订单号：<i>{{ orderDetails.number }}</i></span>
            <div class="status" :class="{ red: orderDetails.status === 3 || orderDetails.status === 4  }">{{ getOrderStatus(orderDetails.status) }}</div>
          </div>
          <div class="order-time">
            <span class="time">下单时间：{{ orderDetails.orderTime }}</span>
          </div>
        </div>
        <div class="user-info">
          <div class="username-phone">
            <span class="username">用户名：<i>{{ orderDetails.userName }}</i></span>
            <span class="phone">手机号：<i>{{ orderDetails.phone }}</i></span>
          </div>
          <p class="predict-time">预计送达时间：<i>{{ orderDetails.estimatedDeliveryTime }}</i></p>
          <p class="address">地址：<i>{{ orderDetails.address }}</i></p>
          <div class="remark" :class="{ reject: orderDetails.status === 6 }">
            <div>{{ orderDetails.status !== 6 ? '备注' : '取消原因' }}</div>
            <p>{{ orderDetails.remark || orderDetails.rejectionReason || orderDetails.cancelReason }}</p>
          </div>
        </div>
        <div class="dish-info">
          <span class="title">菜品</span>
          <div class="detail">
            <ul class="list">
              <li v-for="item in orderDishDetailList" :key="item.id" class="item">
                <span class="dish">{{ item.name }}*{{ item.number }}</span>
                <span class="price">￥{{ item.amount }}</span>
              </li>
            </ul>
          </div>
          <div class="total">菜品小计 <i>￥{{ dishAmount }}</i></div>
        </div>
        <div class="cost-info">
          <span class="title">费用</span>
          <div class="detail">
            <ul class="list">
              <li class="item">
                <span class="dish">菜品小计：<i>{{ dishAmount }}</i></span>
              </li>
              <li class="item">
                <span class="dish">派送费：￥6</span>
              </li>
              <li class="item">
                <span class="dish">打包费：￥{{ orderDishDetailList.length }}</span>
              </li>
              <li class="item">
                <span class="dish">合计：<i>￥{{ orderDetails.amount }}</i></span>
              </li>
              <li class="item">
                <span class="dish">支付渠道：{{ orderDetails.payStatus === 1 ? '微信支付' : '支付宝支付'  }}</span>
              </li>
              <li class="item">
                <span class="dish">支付时间：{{ orderDetails.checkoutTime }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <template slot="footer">
        <div v-show="orderDetails.status !== 6 && orderDetails.status !== 5" class="dialog-footer">
          <el-checkbox v-model="autoNext">处理完自动跳转到下一条</el-checkbox>
          <el-button @click="close()">返回</el-button>
          <el-button  v-show="orderDetails.status === 2" @click="handleClick(0, orderDetails.id)" type="danger">拒单</el-button>
          <el-button  v-show="orderDetails.status !== 2" @click="handleClick(6, orderDetails.id)" type="danger">取消</el-button>
          <el-button v-show="orderDetails.status === 2" @click="handleClick(1, orderDetails.id)" type="primary">接单</el-button>
          <el-button v-show="orderDetails.status === 3" @click="handleClick(2, orderDetails.id)" type="primary">派送</el-button>
          <el-button v-show="orderDetails.status === 4" @click="handleClick(4, orderDetails.id)" type="primary">完成</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getOrderStatus } from '@/utils/utils'
export default {
  name: 'DialogOrderDetail',
  data () {
    return {
      autoNext: false
    }
  },
  props: {
    dialogVisibleOrder: {
      type: Boolean,
      default: false
    },
    orderDetails: {
      type: Object,
      default () {
        return {}
      }
    },
    orderDishDetailList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    close (flag) {
      this.$emit('update:dialogVisibleOrder', flag)
    },
    handleClick (state, id) {
      this.$emit('click', state, id, this.autoNext)
    },
    getOrderStatus
  },
  computed: {
    dishAmount () {
      return this.orderDishDetailList.reduce((sum, item) => sum + item.amount, 0)
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .el-dialog {
  .main {
    width: 90%;
    margin: 0 auto;

    .head {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #e7e6e6;
      padding: 0 15px 20px 15px;

      > div {
        display: flex;
        align-items: center;
      }

      .number-status {
        font-size: 16px;

        .number i {
          color: #2a2929;
          font-weight: 700;
        }

        .status {
          border-radius: 100vh;
          color: #fff;
          font-size: 14px;
          padding: 3px 8px;
          margin-left: 20px;
          background-color: #333;
        }

        .status.red {
          background-color: #f56c6c;
        }
      }

      .order-time {
        font-size: 14px;
      }
    }

    .user-info {
      background-color: #fbfbfa;
      margin-top: 20px;
      padding: 15px 30px;

      .username-phone {
        display: flex;

        > span {
          color: #666;

          i {
            color: #333;
          }
        }

        .username {
          flex: 30%;
        }

        .phone {
          flex: 1;
        }
      }

      > p {
        color: #666;

        &:nth-child(2) {
          margin: 10px 0;
        }

        i {
          color: #333;
        }
      }

      .remark {
        border: 1px solid #fbe396;
        border-radius: 5px;
        background-color: #fffbf0;
        padding: 5px;
        display: flex;
        align-items: center;
        margin-top: 10px;

        &.reject {
          background-color: #fff;
          border: 1px solid #b6b6b6;

          > div {
            background-color: #e5e4e4;
          }

          > p {
            color: #f56c6c;
          }
        }

        > div {
          background-color: #fbe396;
          color: #333;
          border-radius: 5px;
          padding: 8px 16px;
        }

        > p {
          color: #f2a402;
          margin-left: 20px;
        }
      }
    }

    .dish-info, .cost-info {
      display: flex;
      margin-top: 20px;
      flex-wrap: wrap;
      border-bottom: 1px solid #e7e6e6;
      padding-bottom: 20px;

      &:last-child {
        border-bottom: 0;
      }

      .title {
        margin-right: 50px;
        margin-left: 50px;
      }

      .detail {
        flex: 80%;
        margin-bottom: 20px;
        color: #333;

        .list {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          row-gap: 10px;

          .item {
            .dish {
              margin-right: 30px;
            }
          }
        }
      }

      .total {
        margin-left: 128px;
        color: #333;
        font-weight: 600;

        i {
          color: #f56c6c;
        }
      }

    }

    .cost-info {
      .detail .list {
        .item:nth-child(4) i {
          color: #f56c6c;
        }
      }
    }
  }
}

::v-deep .el-dialog__body {
  padding: 30px 20px 10px 20px;
}

::v-deep .el-dialog__footer {
  padding: 0 40px 40px 0;
}
</style>
